<template>
  <!-- 新版登录按钮 -->
  <el-form :model="detail" label-width="auto" :disabled="disabled">
    <OImage v-model="detail.bg" v-model:size="detail.$size" v-model:show="detail.bgShow" name="背景图片" @change="onChange" />
    <span style="margin-right: 8px;">登录文字开关</span><el-switch v-model="detail.showText" @change="onChange" active-text="显示"
      inline-prompt inactive-text="隐藏" :active-value="true" :inactive-value="false"> </el-switch>
  </el-form>
</template>

<script setup lang="ts">
import OImage from "../../setting/Images.vue";
const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:config", "change"]);
const form = ref({
  $position: { top: 0, left: 50 },
  $size: { width: 200, height: 50 },
  $removeable: true,
  $positionType: "absolute",
  showBg: false,
  bg: "",
  bgShow: true,
  showText: false
});

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const onChange = () => {
  detail.value = detail.value;
};


onMounted(() => {
  onChange();
});
</script>
<style lang="scss" scoped></style>